<!DOCTYPE HTML>
<html>
<head>
    <title>Sliding Menu</title>
    <link type="text/css" rel="stylesheet" hred="./CSS/slidingMenu.css">
</head>
<body>
    <h1>Test Sliding Menu</h1>
    <div>
        <a href="menu1.html" class="menuLink">A</a>
        <ul class="menu" id="menu1" >
            <li><a href="pg11.html">m1 p1</a></li>
            <li><a href="pg21.html">m1 p2</a></li>
            <li><a href="pg31.html">m1 p3</a></li>
            <li><a href="pg41.html">m1 p4</a></li>
        </ul>
    </div>
    <div>
        <a href="menu2.html" class="menuLink">A</a>
        <ul class="menu" id="menu2" >
            <li><a href="pg21.html">m2 p1</a></li>
            <li><a href="pg22.html">m2 p2</a></li>
            <li><a href="pg23.html">m2 p3</a></li>
        </ul>
    </div>
    <div>
        <a href="menu3.html" class="menuLink">A</a>
        <ul class="menu" id="menu3" >
            <li><a href="pg31.html">m3 p1</a></li>
            <li><a href="pg32.html">m3 p2</a></li>
            <li><a href="pg33.html">m3 p3</a></li>
        </ul>
    </div>
<script type="text/javascript">
    window.onload = initAll;

    function initAll(){
        var allLinks = document.getElementsByTagName("a");

        for(var i=0;i<allLinks.length;i++){
            if(allLinks[i].className.indexOf("menuLink") > -1){
                //allLinks[i].onclick = toggleMenu;
                allLinks[i].onclick = function(){return false};
                allLinks[i].onmouseover = toggleMenu;
                console.log("allLinks add onclick");
            }
        }
    }

    function toggleMenu(){
        var startIndex = this.href.lastIndexOf("/")+1;
        var stopIndex = this.href.lastIndexOf(".");

        var thisMenuName = this.href.substring(startIndex,stopIndex);
//        var thisMenu = document.getElementById(thisMenuName).style;
//        thisMenu.display = (thisMenu.display == "block")?"none":"block";
//        return false;

        document.getElementById(thisMenuName).style.display = "none";
        this.parentNode.className = thisMenuName;
        this.parentNode.onmouseout = toggleDivOff;
        this.parentNode.onmouseover = toggleDivOn;
    }

    function toggleDivOff(){
        document.getElementById(this.className).style.display = "none";
    }

    function toggleDivOn(){
        document.getElementById(this.className).style.display = "block";
    }
</script>
</body>
</html>